<template>
  <div class="login-page">
    <van-nav-bar class="register" 
    
    title="账号登录" 
/>
<van-form @submit="onSubmit">
  <van-field class="user"
    v-model="username"
    name="username"
    placeholder="请输入账号"
    :rules="[
    { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符'}
    ]"
  />
  <van-field class="user"
    v-model="password"
    type="password"
    name="password"
    placeholder="请输入密码"
    :rules="[
    { pattern: /^\d{6}$/, message: '密码至少包含6个字符'}
    ]"
  />
  <div style="margin: 20px;">
    <van-button round block type="info" native-type="submit" class="rbtn">登录</van-button>
  </div>
</van-form>
 <router-link class="link" to="/register">还没有账号，去注册~</router-link>
  </div>
</template>

<script>
import {getArticleApi} from '@/api/article'
import {  mapMutations } from 'vuex'
export default {
  name: 'login-page',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  created(){
      this.getUserInfo()
  },
  methods: {
    ...mapMutations('user',['logout']),

    async getUserInfo(){
      
    },
   async onSubmit (values) {
      console.log('values', values);
      // console.log(getArticleApi());
       try {
        const res = await getArticleApi(values)
        console.log(res)
        // this.username = username
        // this.password= password
        this.$store.commit('user/updateToken',res.body.token)
        this.$router.push('/home/my')
      } catch (err) {}
    },
    // { validator: valiFn, message: '密码至少包含6个字符'}
    // valiFn (val) {
    //   return /^\d{6}$/.test(val)
    // }
  //  layout(){
  //     this.logout()

  //   }
  }
}
</script>

<style lang="less" scoped>
.link {
  color:gray;;
  font-size: 14px;
  padding-right: 118px;
  float: right;
}
// 账号注册
.register{
    background-color:#0dbc79;
    font-size: 18px;
    height: 50px;
    // color: white;
}
// 注册按钮
.rbtn{
    font-size: 18px;
    height: 50px;
    border: 0px;
    border-radius: 0;
    background-color:#0dbc79
}
.user{
    height: 70px;
    line-height: 70px;
    font-size: 17px;
}
</style>
